import style from './style/block.scss';
export default class Block extends React.Component{
	constructor(){
		super();
		this.state = {
			isOpen:false,
			isActive:false
		}
	}
	static defaultProps = {
		isSidebarOpen:false
	}
	activeBlock(){
		this.setState({
			isActive:true,
			isOpen:true
		})
	}
	unActiveBlock(){
		if(this.state.isActive){
			this.setState({
				isActive:false,
				isOpen:false
			})
		}
	}
	toggleContent(){
		if(!this.state.isActive){
			this.setState({
				isOpen:!this.state.isOpen
			})
		}
	}
	render(){
		return (
			<div 
			onMouseLeave={::this.unActiveBlock}
			className={cn({
				[style.block]:true,
				[style.open]:this.state.isOpen,
				[style.active]:this.state.isActive,
				[style.sidebarOpen]:this.props.isSidebarOpen
			})}>
				<div onMouseOver={::this.activeBlock} className={style["block-icon"]}>
					<span className={this.props.icon}></span>
				</div>
				<section className={style["block-container"]}>
					<div className={style["header"]} onClick={::this.toggleContent}>
						<span className={style.arrow}><i className="fa fa-angle-right"></i></span>
						<h4>{this.props.title}</h4>
					</div>
					<div className={style["content"]}>
						{this.props.children}
					</div>
				</section>
			</div>
		)
	}
}